<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <title>wow.js — Reveal Animations When Scrolling</title>
    <meta name="description" content="wow.js is a JavaScript plugin that reveals animations when you scroll. Very Animate.css Friend.">
    <meta name="keywords" content="wow.js, wow js, wowjs, JavaScript">
    <meta charset="utf-8">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon"><!-- Styles -->
    <link rel="stylesheet" href="typopro-web/web/TypoPRO-ComicNeue/TypoPRO-ComicNeue.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/libs/animate.css">
    <link rel="canonical" href="index.html">
  </head>
  <body>
    <div class="content">
      <div class="container-gray">
        <div class="container">
          <div class="row small center wow fadeInDown top__element" data-wow-delay="0.5s">
            <div class="span2"><a href="docs.html">How to use? </a></div>
            <div class="span2"><a target="_blank" href="https://github.com/graingert/wow">GitHub</a></div>
          </div>
        </div>
      </div>
            <div class="container-white">
        <div class="container">
          <div class="row">
            <div class="span12 center">
              <h1 data-wow-iteration="3" data-wow-duration="0.15" class="wow pulse">
                <img src="img/wow-logo.jpg" height="177" alt="wow.js">
              </h1>
              <div class="spiel" data-wow-duration="0.5s" class="wow bounceInDown">
                Reveal Animations When You Scroll. Very <a target="_blank" href="https://daneden.github.io/animate.css/" title="Animate.css">Animate.css </a>Friend :-)
                <br>
                Easily customize animation settings: style, delay, length, offset, iterations...
                <br>
                100% MIT Licensed, not GPL. Keep your code yours.
                <br>
                ES2015+, naturally Caffeine free.
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-white">
        <div class="container circles">
          <div class="row">
            <div data-wow-delay="0.5s" class="span3 wow rollIn">
              <p class="circle bg-green">such easy</p>
            </div>
            <div data-wow-delay="0.5s" class="span3 wow bounceInDown center"><img src="img/wow-1.gif" height="200" class="wow"></div>
            <div data-wow-delay="0.5s" class="span3 wow lightSpeedIn">
              <p class="circle bg-yellow">very ES	</p>
            </div>
          </div>
          <div class="row">
            <div class="span3 wow rollIn center"><img src="img/wow-3.gif" height="200"></div>
            <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow pulse">
              <p class="circle bg-blue">WOW		</p>
            </div>
            <div class="span3 wow bounceInRight center"><img src="img/wow-12.gif" height="200"></div>
          </div>
          <div class="row">
            <div class="span3 wow bounceInLeft">
              <p class="circle bg-red">no jquery</p>
            </div>
            <div class="span3 wow flipInX center"><img src="img/wow-2.gif" height="200"></div>
            <div class="span3 wow bounceInRight">
              <p class="circle bg-purple">many anims	</p>
            </div>
          </div>
          <div class="row">
            <div class="span3 wow rollIn center"><img src="img/wow-5.gif" height="200"></div>
            <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow shake">
              <p class="circle bg-yellow">aint GPL</p>
            </div>
            <div data-wow-iteration="2" class="span3 wow swing center">	<img src="img/wow-6.gif" height="200"></div>
          </div>
          <div class="row">
            <div class="span3 wow rollIn">
              <p class="circle bg-purple">how small</p>
            </div>
            <div data-wow-delay="0.5s" class="span3 wow bounceInUp center"><img src="img/wow-10.gif" height="200"></div>
            <div data-wow-delay="0.5s" data-wow-duration="0.15s" class="span3 wow lightSpeedIn">
              <p class="circle bg-green">3 KiB only	</p>
            </div>
          </div>
          <div class="row">
            <div class="span3 wow rollIn center"><img src="img/wow-7.gif" height="200"></div>
            <div data-wow-iteration="5" data-wow-duration="0.25s" class="span3 wow pulse">
              <p class="circle bg-blue">just scroll</p>
            </div>
            <div class="span3 wow lightSpeedIn center"><img src="img/wow-9.gif" height="200"></div>
          </div>
          <div class="row">
            <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow bounce">
              <p class="circle bg-yellow">reveal now</p>
            </div>
            <div class="span3 wow bounceInUp center"><img src="img/wow-8.gif" height="200"></div>
            <div class="span3 wow bounceInRight">
              <p class="circle bg-red">so impress</p>
            </div>
          </div>
          <div class="row">
            <div class="span3 wow rollIn center"><img src="img/wow-4.gif" height="200"></div>
            <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow flip">
              <p class="circle bg-green">WOW</p>
            </div>
            <div class="span3 wow bounceInRight center"><img src="img/wow-11.gif" height="200"></div>
          </div>
          <div class="row">
            <div data-wow-delay="0.5s" class="span3 wow rollIn">
              <p class="circle bg-red">no jquery?!</p>
            </div>
            <div data-wow-delay="1s" class="span3 wow bounceInDown center"><img src="img/grumpy.gif" height="200"></div>
            <div data-wow-delay="1.5s" class="span3 wow bounceInRight">
              <p class="circle bg-purple">that sucks!	</p>
            </div>
          </div>
        </div>
      </div>
      <div class="container-white">
        <div class="container">
          <div class="row">
            <div class="span12 center">
              <h3>Licensed under the <a href="https://raw.githubusercontent.com/graingert/WOW/master/LICENSE" target="_blank">MIT License</a>:</h3>
              <div class="wow zoomIn" data-wow-duration="1s" data-wow-offset="100">
                <div class="wow tada" data-wow-delay="1s" data-wow-duration="1s">
                  <div class="wow rubberBand" data-wow-delay="2000ms" data-wow-duration="1s">
                    <div class="wow pulse" data-wow-delay="300ms" data-wow-iteration="infinite" data-wow-duration="2s">
                      <a href="https://raw.githubusercontent.com/graingert/WOW/master/LICENSE" title="MIT License" target="_blank">
                        <img src="img/mit.svg" alt="MIT License" class="center" height="414" width="414">
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="span12 center">
              <h3>See wow.js revealing animations on these websites:</h3>
              <p>
                <a target="_blank" href="https://aerolab.co/lab" title="Aerolab - Design and Development for Startups and Leading Brands">* Aerolab *</a>
                <br>
                <a href="http://www.streamlineicons.com/" title="Streamline Icons" target="_blank">* Streamline Icons *</a>
                <br>
                <a href="https://www.box.com/notes/" title="Box Notes" target="_blank">* Box Notes *</a>
                <br>
                <a href="http://www.rockband4.com/" title="Rock Band 4" target="_blank">* Rock Band 4 *</a>
              </p>
            </div>
            <div class="span12 center">
              <h3>Free to use and modify wow.js under the MIT License:</h3>
              <p>
                If you want to use wow.js to develop commercial sites, themes, projects, and applications you are 100% free to do so!
                Your source code is kept proprietary.
                Just remember to include the <strong>entire</strong> contents of
                <a href="https://raw.githubusercontent.com/graingert/WOW/master/LICENSE">The MIT Licenses</a> in your product.
              </p>
              <div class="row">
                <div class="span6 center">
                  <div class="pricing pricing--single">
                    <a href="https://raw.githubusercontent.com/graingert/WOW/master/LICENSE">
                      <span class="pricing-title">wow.js MIT</span>
                      <span class="pricing-name">Free</span>
                      <span class="pricing-type">License</span>
                      <span class="pricing-description">For &#8734; Project</span>
                      <span class="price"><strong>FREE!</strong></span>
                    </a>
                  </div>
                </div>
                <div class="span6 center">
                  <div class="pricing pricing--extended">
                   <a href="https://raw.githubusercontent.com/graingert/WOW/master/LICENSE">
                    <span class="pricing-title">wow.js MIT Deluxe</span>
                    <span class="pricing-name">Free XL</span>
                    <span class="pricing-type">License</span>
                    <span class="pricing-description">For &#8734; Unlimited &#8734; Projects</span>
                    <span class="price"><strong>EVEN MORE FREE!</strong></span>
                   </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="span12 center">
              <h3>Checkout my other projects!</h3>
              <p>
                <a target="_blank" href="https://sqlalchemy-redshift.readthedocs.io/en/latest/" >* SQLAlchemy Redshift *</a><br>
                <a target="_blank" href="https://github.com/graingert/slimerjs" >* SlimerJS NPM bundler *</a><br>
              </p>
            </div>
            <div class="span12 center">
              <h3>Installing wow.js takes only seconds: <a href="docs.html">Read the documentation</a></h3>

                <p class="small">
                Developed by <a rel="nofollow" href="http://mynameismatthieu.com" title="Matt Aussaguel" target="_blank">Matt Aussaguel</a> &ndash;
                Forked to remain under the MIT license by <a href="https://graingert.co.uk/">Thomas Grainger</a> &ndash;
                  Initiated & Designed by <a target="_blank" href="http://www.webalys.com/" title="Webalys - Free Resources for Designers">Webalys</a>
                </p>
                <p class="small">
                  Contributed by <a href="http://attilaolah.eu/" title="Attila Oláh" target="_blank">Attila Oláh</a>
                </p>
                <p class="small">CSS animations powered by  <a href="https://github.com/graingert/WOW/">wow.js </a>and <a href="https://daneden.me/animate" target="_blank" title="Animate.css">Animate.css</a></p><br><br>
              </div>
            </div>
          </div>
        </div>
      </div>
    <script src="dist/wow.min.js"></script>
    <script>
     new WOW().init();
    </script>
  </body>
</html>
